<template>
    <div style="width: 96vw;margin-left:1.5vw;margin-top: 10px; background-color: #fff; border-radius: 10px; padding: 15px; box-sizing: border-box;"
        v-for="(item1, index) in orderData">
        <div style="display: flex;justify-content:space-between;">
            <span style="font-size: 12px;color: #333;">
                订单时间:{{ item1.created_at }}
            </span>
            <span style="font-size: 12px;color: #333;">
                {{ fmtState(item1.status) }}
            </span>
        </div>

        <van-card :num="item2.count" :price="item2.goods_info.price?.toFixed(2)" :desc="item2.goods_info.detail_info" :title="item2.goods_info.name" 
            :thumb="item2.goods_info.pic_url" 
            v-for="(item2,index) in item1.order_goods_infos"/>

            <div style="display: flex;justify-content:space-between;margin-top: 10px;">
            <span style="font-size: 12px;color: #333;">
                支付方式:{{ fmtMethod(item1.pay_type) }}
            </span>
            <span style="color: #333;font-weight: bold;">
               总金额： {{ item1.price }}
            </span>
        </div>
    </div>
</template>

<script setup>
import { ref, computed,watch } from 'vue'
const props = defineProps(['orderData'])

//console.log(props.orderData)

function fmtState(status) {
    switch (status) {
        case 1:
            return '待支付'
        case 2:
            return '已支付'
        case 3:
            return '待收货'
        case 4:
            return '待评价'
    }
}
function fmtMethod(type) {
    switch (type) {
        case 1:
            return '微信'
        case 2:
            return '支付宝'
        case 3:
            return '云闪付'
    }
}
</script>